<template>
    <div id="soil">
        <div id="h-tile">湿度监控</div>
        <div  id="rr" style="width: 180px;height: 180px;">

        </div>
  <div  id="uu" style="width: 180px;height: 180px;">

        </div>

    </div>


</template>
<script>
 import * as echarts from 'echarts';
export default {
     name: '',
        data () {
            return {
                charts: '',
            }
        },

        methods:{
            draw(id,dvalue){
                 this.charts = echarts.init(document.getElementById(id))
               this.charts.setOption({
                 tooltip: {
                   formatter: '{a} <br/>{b} : {c}%'
                 },
                 series: [{
                   name: 'Pressure',
                   type: 'gauge',
                   detail: {
                     formatter: '{value}'
                   },
                   axisTick: {
                                   distance: -17,
                                   lineStyle: {
                                       width: 2,
                                       color: '#999'
                                   }
                               },
                               splitLine: {
                                               distance: -1,
                                               length: 14,
                                               lineStyle: {
                                                   width: 3,
                                                   color: '#999'
                                               }
                                           },
                                           axisLabel: {
                                               distance: -15,
                                               color: '#999',
                                               fontSize: 10
                                           },
                    detail: {
                     fontSize: 15,
                    },
                   data: [{
                     value: 50
                   }]
                 }]
               })
            }
        },
        mounted(){
            this.$nextTick(function() {
                this.draw('rr',40)
                this.draw('uu',60)
            })
        }

}
</script>

<style lang="scss" scoped>


#rr{
top: 20%;
    position: absolute;
    right: 0;
}
#uu{
top: 20%;
    position: absolute;
    left: 0;
}
#h-tile{
    top: 15%;
    left: 40%;
    position: absolute;
}
</style>
